<template>
  <div>
    <DecorativeTitle text="24小时内数据统计(城区)"/>
    <div id="dispatchCenter" class="d-flex pt-3 px-2" style="align-items: flex-start;">
      <div style="flex: 1;">
        <IconStatsRow icon="callin.png" :statsData="callInStats" />
        <IconStatsRow icon="offHook-blue.png" :statsData="zjslt10Stats" />
        <IconStatsRow icon="ambulance-blue.png" :statsData="ccsStats" />
      </div>
      <div style="flex: 1;">
        <IconStatsRow icon="offHook-blue.png" :statsData="zjsStats" />
        <IconStatsRow icon="offHook-orange.png" :statsData="zjslt10RateStats" />
        <IconStatsRow icon="patient.png" :statsData="brsStats" />
      </div>
    </div>
  </div>
</template>
<script>
import bus from "@/bus";
import config from "@/config";
import IconStatsRow from "@/components/IconStatsRow.vue";
import DecorativeTitle from "@/components/DecorativeTitle.vue";
import { getUnitCalItemsWithNoAuthorization } from "@/api/UnitCalculate";
import { getLast24HoursRange } from "@/utils/dateUtil";

export default {
  components: {DecorativeTitle, IconStatsRow},
  data() {
    return {
      standardData: {
        beginDateTime: '',
        endDateTime: '',
        calItems: [
          { calName: "呼入数", dataIndex: "HRS" },
          { calName: "摘机数", dataIndex: "ZJS" },
          { calName: "10秒内摘机数", dataIndex: "ZJSLT10" },
          { calName: "10秒摘机率", dataIndex: "ZJSLT10RATE" },
          { calName: "出车数", dataIndex: "CCS" },
          { calName: "救治患者人数", dataIndex: "BRS" }
        ],
        screens: [
          {
            ref: "CIAREA_CODE",
            checkIden: "CIAREA_CODE_1",
            rlevantData: {
              iden: "CIAREA_CODE_1",
              filterType: 2,
              value: [
                {
                  value: config.xzbm,
                  xzbm: config.xzbm
                }
              ]
            }
          }
        ]
      },

      callInStats: [
        { number: 0, label: '呼入数' }
      ],
      zjsStats: [
        { number: 0, label: '摘机数' }
      ],
      zjslt10Stats: [
        { number: 0, label: '10秒内摘机数' }
      ],
      zjslt10RateStats: [
        { number: 0, label: '10秒摘机率' }
      ],
      ccsStats: [
        { number: 0, label: '出车数' }
      ],
      brsStats: [
        { number: 0, label: '救治患者人数' }
      ]
    }
  },
  async created() {
    this.fetchData()
    // 监听全局刷新事件
    this.refreshHandler = () => {
      console.log("定时刷新：CityArea24hStats")
      this.fetchData();
    }
    bus.$on('refresh-all-data', this.refreshHandler)
  },
  methods: {
    async fetchData() {
      const { beginDateTime, endDateTime } = getLast24HoursRange();
      this.standardData.beginDateTime = beginDateTime;
      this.standardData.endDateTime = endDateTime;
      const res = await getUnitCalItemsWithNoAuthorization(this.standardData);
      if (res.code === 200 && res.isSuccess) {
        try {
          const entityList = JSON.parse(res.entity);
          console.log("entityList:", entityList)
          if (entityList && entityList.length > 0) {
            const unitCallItem = entityList[0];
            const hrs = unitCallItem.HRS || '0'
            const zjs = unitCallItem.ZJS || '0'
            const zjslt10 = unitCallItem.ZJSLT10 || '0'
            const zjslt10Rate = unitCallItem.ZJSLT10RATE || '0'
            const ccs = unitCallItem.CCS || '0'
            const brs = unitCallItem.BRS || '0'
            this.callInStats = [
              { number: hrs, label: '呼入数' }
            ]
            this.zjsStats = [
              { number: zjs, label: '摘机数' }
            ]
            this.zjslt10Stats = [
              { number: zjslt10, label: '10秒内摘机数' }
            ]
            this.zjslt10RateStats = [
              { number: zjslt10Rate, label: '10秒摘机率' }
            ]
            this.ccsStats = [
              { number: ccs, label: '出车数' }
            ]
            this.brsStats = [
              { number: brs, label: '救治患者人数' }
            ]
          } else {
            this.callInStats = [
              { number: 0, label: '呼入数' }
            ]
            this.zjsStats = [
              { number: 0, label: '摘机数' }
            ]
            this.zjslt10Stats = [
              { number: 0, label: '10秒内摘机数' }
            ]
            this.zjslt10RateStats = [
              { number: 0, label: '10秒摘机率' }
            ]
            this.ccsStats = [
              { number: 0, label: '出车数' }
            ]
            this.brsStats = [
              { number: 0, label: '救治患者人数' }
            ]
          }
        } catch (e) {
          console.error('entity 解析失败', e);
        }
      }
    }
  },
  beforeDestroy() {
    bus.$off('refresh-all-data', this.refreshHandler)
  }
}
</script>
<style lang="scss" scoped>

</style>
